/*设置轮播图外部div的初始高度并进行尺寸监听，随图片大小尺寸变而变*/
$(window).on('resize',function(){
    $('div.banner').css('height',$('div.image img').css('height'));
    $('div.footerImage').css('height',$('div.footerImage img:eq(0)').css('height'));
})
/*背景音乐*/
//播放音乐时的点点
var pointer='.';
musicPlaying=function(){
    if(pointer==='....') pointer='';
    $('span.bgMusic').html(pointer);
    pointer+='.';
};
var timerMusic=setInterval(musicPlaying,500);
$('span.bgMusic').click(function(){
    if($(this).css('color')==='rgb(0, 191, 255)'){
        $(this).css('color','rgb(158, 158, 158)');
        $('nav audio')[0].pause();
        clearInterval(timerMusic);
        $('span.bgMusic').html('');
    }
    else {
        $(this).css('color','rgb(0, 191, 255)');
        $('nav audio')[0].play();
        timerMusic=setInterval(musicPlaying,500);
    }
});
//图片旋转轮播
function Carousel(z){
    /*判断图片数量，动态定义图片初始度数，若只有一张图片，则不显示右转左转按钮*/
    var rotateDeg, imageCount = $('div.image img').length;//rotateDeg为旋转度数，imageCount为图片的数量，z为z轴移动距离
    $('div.image>img:eq(0)').addClass('current');//给当前展示图片打上标记current
    /*判断旋转图片数量，若为1则旋转按钮隐藏，否则计算对应图片数量的旋转度数，并令第一张为可见*/
    if (imageCount == 1) {
        $('#rightR').hide();
        $('#leftR').hide();
    }
    else {
        rotateDeg = 180 - ((imageCount - 2) * 180 / imageCount);
        for (var i = 0; i < imageCount; i++) {
            $('div.image img')[i].style.transform = "rotateY(" + (rotateDeg * i) + "deg) translateZ(" + z + "px)";
            $('div.image img')[i].style.display = "none";
            $('div.image img')[0].style.display = "block";
        }
    }
    /*右转与左转效果*/
    /*给当前显示的图片打上标记class,名字为current,每次返回当前图片在图片组中所对应的位置，若为最后一张，再次点击右转则第一张出现，最后一张隐藏，若为第一张，则再次点击左转最后一张出现，第一张隐藏*/
    var count = 1;//当前显示的图片为第count张
    /*右转*/
    $('img.rightR').click(function () {
        var right = parseInt($('div.image')[0].style.transform.slice(8));//动态获取当前旋转度数
        if(isNaN(right)) right=0;//判断初始的需转度数是否为NaN，若是则为0度(第一次取值transform，由于css未设置初值，会取到NaN)
        if (count == imageCount) {//判断上次点击显示的图片是否为最后一张，如果是则删除最后一张的标记，打到第一张上
            $('.image')[0].style.transform = "rotateY(" + (right - rotateDeg) + "deg)";
            $('div.image .current').fadeOut().removeClass('current');
            $('div.image img:first-child').fadeIn().addClass('current');
        }
        else {//若不为最后一张，则正常促发右转事件,下张图片显示,本张隐藏
            if ($('div.image')[0].style.transform.slice(8, 12) == "") {
                $('.image')[0].style.transform = "rotateY(" + (-rotateDeg) + "deg)";
                $('div.image .current').next().fadeIn().addClass('current');
                $('div.image .current').prev().fadeOut().removeClass('current');
            }
            else {
                $('.image')[0].style.transform = "rotateY(" + (right - rotateDeg) + "deg)";
                $('div.image .current').next().fadeIn().addClass('current');
                $('div.image .current').prev().fadeOut().removeClass('current');
            }
        }

        for (var i = 1; i <= imageCount; i++) {//获取当前标记并显示的为第几张图片
            if ($('div.image img:nth-child(' + i + ')')[0] == $('.image .current')[0]){
                //更换皮肤类型
                $('div.skinSort img:nth-child('+i+')').fadeIn();
                $('div.skinSort img:nth-child('+i+')').siblings().fadeOut();
                return count = i
                };
        }
    });
    /*左转*/
    $('img.leftR').click(function () {
        var left = parseInt($('.image')[0].style.transform.slice(8));//动态获取当前旋转度数(命名为left与right是为了语义化命名)
        if(isNaN(left)) left=0;//判断初始的需转度数是否为NaN，若是则为0度(第一次取值transform，由于css未设置初值，会取到NaN)
        if (count == 1) {//判断上次点击显示的图片是否为第一张，如果是则删除第一张的标记，打到最后第一张上
            $('div.image')[0].style.transform = "rotateY(" + (left + rotateDeg) + "deg)";
            $('div.image .current').fadeOut().removeClass('current');
            $('div.image img:last-child').fadeIn().addClass('current');
        }
        else {//若不为第一张，则正常促发左转事件,上张图片显示,本张隐藏
            if ($('div.image')[0].style.transform.slice(8, 12) == "") {
                $('.image')[0].style.transform = "rotateY(" + rotateDeg + "deg)";
                $('div.image .current').prev().fadeIn().addClass('current');
                $('div.image .current').next().fadeOut().removeClass('current');
            }
            else {
                $('div.image')[0].style.transform = "rotateY(" + (left + rotateDeg) + "deg)";
                $('div.image .current').prev().fadeIn().addClass('current');
                $('div.image .current').next().fadeOut().removeClass('current');
            }
        }
        for (var i = 1; i <= imageCount; i++) {//获取当前标记并显示的为第几张图片
            if ($('div.image img:nth-child(' + i + ')')[0] == $('.image .current')[0]){
                //更换皮肤类型
                $('div.skinSort img:nth-child('+i+')').fadeIn();
                $('div.skinSort img:nth-child('+i+')').siblings().fadeOut();
                return count = i;
            }
        }
    });
    /*轮播指示箭头的出现与消失*/
    $('div.banner').hover(function(){
        $('img.leftR').fadeIn();
        $('img.rightR').fadeIn();
        },
        function(){
            $('img.leftR').fadeOut();
            $('img.rightR').fadeOut();
        }
    )
}
//箭头src的改变
$('img.leftR').hover(
    function(){
        this.src=this.src.slice(0,this.src.length-12)+'btn_prev_hover.png';
    },
    function(){
        this.src=this.src.slice(0,this.src.length-18)+'btn_prev.png';
    }
);
$('img.rightR').hover(
    function(){
        this.src=this.src.slice(0,this.src.length-12)+'btn_next_hover.png';
    },
    function(){
        this.src=this.src.slice(0,this.src.length-18)+'btn_next.png';
    }
);
$(window).on('load',function(){
    $('section>div.container').animate({opacity:1},1000);
    Carousel(100);
    Motto.printf('self');
    $('div.heroMotto>audio')[0].play();
	$('div.banner').css('height',$('div.image img').css('height'));
	$('div.footerImage').css('height',$('div.footerImage img:eq(0)').css('height'));
	if(localStorage.getItem('username')!==null){
		$.get("../PHP/login.php",{username:localStorage.getItem('username'),pwd:localStorage.getItem('pwd')},function(data){
			$('button[data-target="#loginPage"]').css('display','none');
			$('button[data-target="#registerPage"]').css('display','none');
			$('#userInformation').html('<b>'+data.user_name+'</b> 欢迎回来').fadeIn();
			$('button.exit').fadeIn();
		});
	}
});
//英雄格言自定义与默认格言的互换
//打印格言对象函数
var Motto={
    LUCIAN:'Everybody decease,song just little help。 ————Lucian',//用于保存默认格言
    LUCIANDefine:null,                                                  //保存自定义格言
    stringIndex:0,
    printf:function(command){
        var me=this,txt='';
        if(command==='self'){txt=me.LUCIAN}
        else txt=me.LUCIANDefine;
        var timer=setInterval(function(){
            //文字的打印
            $('div.heroMotto>p>i').append('<span>'+txt[me.stringIndex]+'</span>');
            me.stringIndex++;
            //下标号的闪现
            if($('div.heroMotto>p>b').html()=='') $('div.heroMotto>p>b').html('_');
            else $('div.heroMotto>p>b').html('');
            //停止打印
            if(me.stringIndex==txt.length) {
                $('div.heroMotto>p>b').html('');
                clearInterval(timer);
                $('div.heroMotto>button').fadeIn(1000);
                me.stringIndex=0;
            }
        },100);
    }
};
//默认格言按钮
$('button.mottoDefault').click(function(){
    $('div.heroMotto>button').fadeOut(500);
    $('div.heroMotto>p>i').find('span').delay(500).fadeOut(300);
    setTimeout(function(){
        $('div.heroMotto>p>i').find('span').remove();
        Motto.printf('self');
        $('div.heroMotto>audio')[0].play();
    },800);
});
//自定义格言
//初始化模态框内容
$('button.mottoDefine').click(function(){
    $('div.modal-body p').html('');
    $('#inputMotto').val('');
});
//保存自定义格言的内容是否为空验证
$('#saveMotto').click(function(){
    $('#myModal p').html('');
    if($.trim($('#inputMotto').val())===''){
        $('#myModal p').css('color','red');
        $('#myModal p').html('格言为空可不能输出喔...');
        $('#inputMotto')[0].focus();
    }
    else{
        var duration=3;//定义成功后关闭模态框的时间与倒数时间
        Motto.LUCIANDefine=$('#inputMotto').val();
        $('#myModal p').css('color','green');
        var timerM=setInterval(function(){
                            $('#myModal p').html('格言定制成功,窗口会在'+duration+'秒后自动关闭');
                            duration--;
                            if(duration===-1) {
                                clearInterval(timerM);
                                $('#myModal').modal('hide');
                                }
                            },1000);
    }
});
//输出自定义格言事件
$('button.myMotto').click(function(){
    if(Motto.LUCIANDefine===null) {
        $(this).attr('data-title','出错啦').attr('data-content','骚年请先创建你的格言，不要调戏我哦!');
        $(this).popover('show');
    }
    else{
		$(this).popover('hide');
        $(this).popover('destroy');
        $('div.heroMotto>button').fadeOut(500);
        $('div.heroMotto>p>i').find('span').delay(500).fadeOut(300);
        setTimeout(function(){
            $('div.heroMotto>p>i').find('span').remove();
            Motto.printf('define');
        },800);
    }
});
$('body').on('click',function(e){
	console.log(e.target);
	if(!$(e.target).hasClass('myMotto')){
		$('button.myMotto').popover('hide');
	}
})
/*屏幕滑动事件*/
//回到顶部
$(window).scroll(function(){
    if(document.body.scrollTop>100){
        $('#toTop').fadeIn();
    }
    else $('#toTop').fadeOut();
});
$('#toTop').click(function(){
    var scrollTop=document.body.scrollTop;
    var timer=setInterval(function(){
        window.scrollTo(0,scrollTop-=30);
        if(scrollTop<=0) clearInterval(timer);
    },10);
});
//Lucian英雄滑动
$('footer>div:eq(1)').click(function(){
    var scrollTop=document.body.scrollTop;
    var final=$('div.banner').parent()[0].offsetTop;
    var timer=setInterval(function(){
        window.scrollTo(0,scrollTop-=30);
        if(scrollTop<=final-50) clearInterval(timer);
    },10);
    $('button.mottoDefault').click();
});

/*背景画布动画*/
//背景小点的生成
function bgPointer(){
    for(var x=0;x<ctx.canvas.width;x+=10){
        for(var y=0;y<ctx.canvas.height;y+=10){
            ctx.fillRect(x,y,1,1);
        }
    }
}
var ctx=c1.getContext('2d');
ctx.canvas.width=document.body.offsetWidth-2;
ctx.canvas.height=document.body.offsetHeight-2;
ctx.fillStyle='#bbbaba';
window.addEventListener('resize',function(){
    ctx.canvas.width=document.body.offsetWidth-2;
    ctx.canvas.height=document.body.offsetHeight-2;
    ctx.fillStyle='#bbbaba';
    bgPointer();
})
bgPointer();

/*登录框的验证*/
//外部点击登录后将登录框所有样式欢迎并去除
$('button[data-target="#loginPage"]').click(function(){
    $('input[name="username"]').val('').tooltip('hide').tooltip('destroy').parent().removeClass('has-success').removeClass('has-error');
    $('input[name="pwd"]').val('').removeClass('has-success').tooltip('hide').tooltip('destroy').parent().removeClass('has-success').removeClass('has-error');
});
//用户名为空的验证
$('input[name="username"]').blur(function(){
    var txtUser=$(this).val();
    if(txtUser.trim()==='') {
        $(this).attr('title','用户名不能为空');
        $(this).tooltip('show');
        $(this).parent().addClass('has-error');
    }
    else {
        $(this).tooltip('hide').tooltip('destroy');
        $(this).parent().addClass('has-success').removeClass('has-error');
    }
});
//密码为空的验证
$('input[name="pwd"]').blur(function(){
    var txtPwd=$(this).val();
    if(txtPwd.trim()==='') {
        $(this).tooltip('show');
        $(this).parent().addClass('has-error');
    }
    else {
        $(this).tooltip('hide').tooltip('destroy');
        $(this).parent().addClass('has-success').removeClass('has-error');
    }
});
/*注册框的重设*/
//外部点击注册后将注册框所有样式去除
$('button[data-target="#registerPage"]').click(function(){
    $('input[name="username"]').val('').tooltip('hide').tooltip('destroy').parent().removeClass('has-success').removeClass('has-error');
    $('input[name="pwd"]').val('').removeClass('has-success').tooltip('hide').tooltip('destroy').parent().removeClass('has-success').removeClass('has-error');
    $('input[name="pwdCertain"]').val('').removeClass('has-success').tooltip('hide').tooltip('destroy').parent().removeClass('has-success').removeClass('has-error');
    $('#registerPage p').html('');
});
//注册时验证确认密码
$('input[name="pwdCertain"]').blur(function(){
    var txtPwdCertain=$(this).val();
    var txtPwd=$.trim($('#registerPage input[name="pwd"]').val());
    if(txtPwdCertain.trim()!==txtPwd){
        $(this).tooltip('toggle');
        $(this).tooltip('show');
        $(this).parent().addClass('has-error');
    }
    else {
        $(this).tooltip('hide').tooltip('destroy');
        $(this).parent().addClass('has-success').removeClass('has-error');
    }
});
//登录异步验证
$('#loginBtn').click(function(){
    $.get("../PHP/login.php",{username:$('#loginPage input[name="username"]').val(),pwd:$('#loginPage input[name="pwd"]').val()},function(data){
        if(data==='fault'){
            $('#loginPage p').html('用户名或密码填写有误').fadeIn();
            $('#loginPage input[name="username"]').parent().addClass('has-error');
            $('#loginPage input[name="pwd"]').parent().addClass('has-error');
            $('#loginPage input[name=username]').focus();
            setTimeout(function(){
                $('#loginPage p').fadeOut();
            },3000);
        }else{
            $('button[data-target="#loginPage"]').fadeOut();
            $('button[data-target="#registerPage"]').fadeOut();
            $('#userInformation').html('<b>'+data.user_name+'</b> 欢迎回来').fadeIn();
            localStorage.setItem('username',data.user_name);
            localStorage.setItem('pwd',data.user_pwd);
            $('button.exit').fadeIn();
            $('#loginPage').modal('hide');
        }
    });
});
//注册异步验证
//验证用户名是否已存在
$('#registerPage input[name=username]').blur(function(){
    $.get("../PHP/checkName.php",{username:$('#registerPage input[name="username"]').val()},function(data){
        if(data=='exist'){
            $('#registerPage input[name=username]').attr('title','用户名已存在');
            $('#registerPage input[name=username]').tooltip('toggle');
            $('#registerPage input[name=username]').next().tooltip('show');
            $('#registerPage input[name=username]').parent().addClass('has-error');
        }
    });
});
//若用户名可用，点击完成按钮，完成数据库的数据插入
$('#registerBtn').click(function(){
    var inputArr=$('#registerPage input');
    for(var i=0;i<inputArr.length;i++){
        if(inputArr.eq(i).parent().hasClass('has-success')===false){
            $('#registerPage p').css('color','red').html('信息填写有误，请按照指定要求填写必要信息').fadeIn();
            setTimeout(function(){
                $('#registerPage p').fadeOut();
            },3000);
            return;
        }
    }
    if($.trim($('input[name="pwdCertain"]').val())===$.trim($('#registerPage input[name="pwd"]').val())){
        $.post("../PHP/register.php",{username:$.trim($('#registerPage input[name="username"]').val()),pwd:$.trim($('#registerPage input[name="pwd"]').val())},function(data){
            if(data==='correct'){
                $('#registerPage p').css('color','#31b0d5').html('恭喜，注册成功!').fadeIn();
                setTimeout(function(){
                    $('#registerPage p').fadeOut();
                    $('#registerPage').modal('hide');
                },3000);
            }
        });
    }
});
//注销当前用户
$('button.exit').click(function(){
    localStorage.removeItem('username');
    localStorage.removeItem('pwd');
    $('#userInformation').fadeOut();
    $('button.exit').fadeOut();
    $('button[data-target="#loginPage"]').fadeIn();
    $('button[data-target="#registerPage"]').fadeIn();
});
